<template>
  <view v-if="isShow" class="blacklist-tip">{{ message }}</view>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    message: {
      type: String,
      default: ''
    },
    duration: {
      type: Number,
      default: 2000
    }
  },
  watch: {
    show: {
      handler(value) {
        this.isShow = value;
        if (value) {
          setTimeout(() => {
            this.isShow = false;
            this.$emit('showTip', this.isShow);
          }, this.duration);
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      isShow: false
    };
  }
};
</script>
<style lang="scss" scoped>
.blacklist-tip {
  position: fixed;
  width: 60%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  margin: auto;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  height: fit-content;
  background-color: rgba(0, 0, 0, 0.7);
}
</style>
